<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间轴</title>
    <style>
        .times{
            display: block;
            margin: 100px;
        }
        .times h1{
            color: red;
        }
        .times ul{
            list-style: none;
        }
        .times ul li b{
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 2px solid red;
            border-radius: 50%;
            margin-right: 30px;
            background: red;
        }
        .times div {
            width: 10px;
            height:50px;
            border-left: 2px solid gray;
            margin: -5px 0px -5px 5px;
        }
        .times ul li:hover{
            color: red;
        }
    </style>
</head>
<body>
<div class="times">
    <h1>成长经历</h1>
     <ul>
         <li><b></b><span>2011年走进大学校园</span></li>
         <div></div>
         <li><b></b><span>2011-2013年在学校获得了各种奖项</span></li>
         <div></div>
         <li><b></b><span>2014年对大学的想法都有了本质的转变</span></li>
         <div></div>
         <li><b></b><span>2015年毕业了，开始在互联网的浪潮中艰难生存</span></li>
         <div></div>
         <li><b></b><span>无论如何，坚持至今</span></li>
     </ul>
</div>

</body>
</html>
